<template>
  <div>
    <el-card>
      <div>
        <!--主页视图区域-->
        <!--图片区域-->
        <div class="block" v-if="!(checkout === 0 || checkout === 1)">
          <div class="condition">
            <div class="text1">退还入库</div>
          </div>
        </div>
        <br />
        <div class="bg-card" v-if="type !== 'view'">
          <el-button type="danger" @click="handleDel" style="margin-left:30px">删除</el-button>
          <el-button @click="handleSubmit(0)" style="margin-left:30px">保存入库单</el-button>
          <el-button type="primary" @click="handleSubmit(1)" style="margin-left:30px">提交</el-button>
          <el-button type="info" @click="handleReturn" style="margin-left:30px">返回</el-button>
        </div>
        <br />
        <!-- <el-form style="margin-left:30px;margin-top:-10px">
          <el-form-item label="入库申请时间">
            <el-date-picker
              v-model="inboundApplyTime"
              type="date"
              format="yyyyMMdd"
              value-format="yyyyMMdd"
              :picker-options="pickerOptions"
              :disabled="type === 'view'"
              placeholder="选择日期"
            ></el-date-picker>
          </el-form-item>
        </el-form> -->
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          ref="table"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" v-if="type !== 'view'"></el-table-column>
          <el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
          <el-table-column prop="goodsId01" label="货品编号" align="center"></el-table-column>
          <el-table-column prop="goodsName" label="货品名称" align="center"></el-table-column>
          <el-table-column prop="specification" label="型号规格" align="center"></el-table-column>
          <el-table-column prop="inboundType" label="入库类型" align="center"></el-table-column>
          <el-table-column prop="goodsUnit" label="单位" align="center"></el-table-column>
          <el-table-column prop="inboundGoodsNumber" label="数量" align="center"></el-table-column>
          <el-table-column prop="goodsPrime" label="保存期限" align="center"></el-table-column>
          <el-table-column prop="inboundRemarks" label="备注" align="center"></el-table-column>
          <el-table-column
            prop="nightContent"
            label="操作"
            align="center"
            widthData="300"
            width="100"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                type="success"
                size="mini"
                style="margin-left:5px"
                @click="handleShow(scope.row)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-button v-if="checkout === 0 " type="primary" @click="handleReturn" style="margin:30px 0 0 30px">返回</el-button>
      </div>
    </el-card>
    <el-dialog title="货品详情" :visible.sync="dialogFormVisible" width="570px" :center="true" v-if="tableData.length !== 0">
      <el-form :inline="true" class="demo-form-inline" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="货品名称">
              <el-input v-model="form.goodsName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="货品编号">
              <el-input v-model="form.goodsId01" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所在仓库">
              <el-input
                v-model="goodsWareHouse[form.warehouse]"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="货品型号">
              <el-input v-model="form.specification" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="货品数量">
              <el-input v-model="form.inboundGoodsNumber"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保存期限">
              <el-date-picker
                v-model="form.goodsPrime"
                type="date"
                format="yyyyMMdd"
                value-format="yyyyMMdd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="入库申请时间">
              <el-date-picker
                v-model="form.inboundx"
                type="date"
                format="yyyyMMdd"
                value-format="yyyyMMdd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input v-model="form.inboundRemarks"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="axiosUpdate(form)"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import FileSaver from "file-saver";
import { table } from "@/mixin/table";
export default {
  mixins: [table],
  data() {
    return {
      headers: {
        Authorization: sessionStorage.getItem("User_Code")
      },
      topFormRule: {
        goodsId01: [{ required: true, message: "必填项", trigger: "blur" }],
        goodsName: [{ required: true, message: "必填项", trigger: "blur" }],
        specification: [{ required: true, message: "必填项", trigger: "blur" }],
        goodsUnit: [{ required: true, message: "必填项", trigger: "blur" }],
        inboundGoodsNumber: [
          { required: true, message: "必填项", trigger: "blur" },
        ],
        inboundType: [{ required: true, message: "必填项", trigger: "change" }],
        goodsPrime: [{ required: true, message: "必填项", trigger: "change" }],
        waringValue: [{ required: true, message: "必填项", trigger: "change" }],
      },
      initTopForm: {
        goodsId01: "",
        goodsName: "",
        inboundGoodsNumber: "",
        goodsPrime: "",
        goodsUnit: "",
        inboundRemarks: "",
        inboundType: "退还入库",
        specification: "",
        warehouse: 1,
        waringValue: 0,
      },
      uploadFile: {
        url: "",
      },
      query: {
        currentPage: 0,
        num: '',
        pageSize: 0
      },
      topForm: {},
      midForm: {},
      inboundApplyTime: "",
      status: 0,
      tableData: [],
      selectData: [],
      type: "add",
      inboundGoodsNumber: "",
      checkout: null,
      wareHouse: 1,
      form: {},
      inboundPeople: '',
      inboundTypeOpt: ["新增入库", "退还入库"],
      textarea: '',
      inboundNum: '',
      dialogFormVisible: false,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
    };
  },
  created() {
    this.type = this.$route.query.type;
    this.query.num = this.$route.query.inboundNum;
    // this.inboundApplyTime = this.$route.query.inboundFillTime;
    this.checkout = Number(this.$route.query.checkout);
    this.wareHouse = this.$route.query.wareHouse
    this.topForm = Object.assign({}, this.initTopForm);
    switch (this.type) {
      case "edit":
      case "view": {
        this.fetch();
        break;
      }
    }
  },
  async mounted() {
    this.$refs.table.toggleAllSelection();
  },
  methods: {
    handleSelectionChange(val) {
      this.selectData = val;
    },
    async handleSubmit(status) {
      if (this.selectData.length === 0) {
        return this.$message.info("没有需要提交的信息")
      }
      for (var i = 0; i < this.selectData.length; i++) {
        if (this.selectData.length === 0) {
          return this.$message.info("请选择需要提交或保存的信息");
        }
        if (!this.selectData[i].goodsPrime && !this.selectData[i].inboundFillTime) {
          return this.$message.info("请将货品信息填写完整");
        }
      }
      const res = await this.$http.post(
        `/restful/v1/dd/inbound/inboundGoodsFilling?inboundApplyTime=121212121&status=${status}&inboundNum=${this.inboundNum}`,
        this.selectData
      );
      if (res.data.code === 1) {
        this.$message.success("操作成功");
        this.$router.push({
          path: `/home/storehouse${this.wareHouse}/acceptance`,
        });
      } else {
        this.$message.error(res.data.message);
      }
    },
    // edit or view
    async fetch() {
      const res2 = await this.$http.get(`/restful/v1/dd/permit/getUserDetail?${Math.random()}`);
      this.inboundPeople = res2.data.object.userName
      const { data } = await this.$http.post(
        `/restful/v1/dd/outbound/getOutboundNumDetail`,
        this.query
      );
      if (data.code === 1 && data.object) {
        // this.tableData = data.object.dataList;
        var arr = data.object.dataList
        for (let i = 0; i < arr.length; i++) {
          var obj = {
            id: i,
            inboundGoodsNumber: String(arr[i].outboundGoodsNumber),
            inboundType: '退还入库',
            goodsId01: arr[i].goodsId01,
            goodsName: arr[i].goodsName,
            goodsUnit: arr[i].goodsUnit,
            inboundPeople: this.inboundPeople,
            specification: arr[i].specification,
            warehouse: arr[i].warehouse,
            inboundRemarks: ''
          }
          this.tableData.push(obj)
        }
        this.$nextTick(function() {
          this.tableData.forEach(item => {
            this.$refs.table.toggleRowSelection(item, true);
          })
        })
      }
    },
    async handleDel() {
      const idx = this.selectData.map((el) => el.id);
      for (let i = 0; i < this.selectData.length; i++) {
        for (let j = 0; j < idx.length; j++) {
          if (this.selectData[i].id === idx[j]) {
            this.selectData.splice(i, 1);
          }
        }
      }
      for (let i = 0; i < this.tableData.length; i++) {
        for (let j = 0; j < idx.length; j++) {
          if (this.tableData[i].id === idx[j]) {
            this.tableData.splice(i, 1);
          }
        }
      }
      if (this.tableData.length === 0) {
        this.handleReturn()
      }
    },
    handleReturn () {
      this.$router.go(-1);
    },
    handleShow(obj) {
      this.dialogFormVisible = true;
      this.form = obj;
    },
    async axiosUpdate(form) {
      this.selectData[form.id] = form
      this.dialogFormVisible = false;
    },
  },
};
</script>
